<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:28
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-11-22 12:14:33
 * @FilePath: \i-hos-app\project\i-his\src\views\emr\components\common\UploadPic.vue
 * @Description: 图片上传插入组件
-->
<template>
  <el-upload
    class="uploadPic"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
  >
    <el-button type="primary">上传图片</el-button>
  </el-upload>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import type { UploadProps } from 'element-plus'

  //  初始化渲染的图片
  let imageUrl = ref('')
  // 上传图片
  const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile): void => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  }
</script>

<style scoped lang="scss">
  .uploadPic {
    position: absolute;
    left: 0;
    top: 0;
    background-color: red;
    width: 100%;
    height: 100%;
    z-index: 9;
  }
</style>
